<template>
	<div>
		<el-table :data="dataList" border v-loading="listLoading" empty-text="暂无需要处理的流程" style="width: 100%; height: 300px;">
			<el-table-column prop="processName" width="150" label="流程名称"></el-table-column>
			<el-table-column prop="name" width="150" label="节点名称"></el-table-column>
			<el-table-column prop="briefReport" label="流程摘要"></el-table-column>
			<el-table-column width="100" prop="submitTime" :formatter="submitTimefn" label="开始时间"></el-table-column>
			<el-table-column prop="startUser" width="100" label="发起人"></el-table-column>
			<el-table-column header-align="center" align="center" width="150" label="操作">
				<template  #default="scope">
					<el-button type="primary" link @click="processTask(scope.row)" >处理</el-button>
					<el-button type="primary" link @click="trace(scope.row)" >跟踪</el-button>
					<el-button type="primary" link @click="detail(scope.row)" >详情</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="onHandleSizeChange"
			@current-change="onHandleCurrentChange"
			:pager-count="5"
			:page-sizes="[10, 50, 200]"
			v-model:current-page="param.page"
			background
			v-model:page-size="param.limit"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total" small>
		</el-pagination>
		<el-dialog title="流程跟踪" v-model="dialogVisible" width="80%" class="customDialog">
			<div class="tabsBackground">
				<iframe id="show-iframe2"  frameborder=0 name="showHere2" scrolling=auto :src="src2" width="100%" height="700px"></iframe>
			</div>
		</el-dialog>
		<VFormProcessDetail ref="vFormProcessDetailRef" @refreshDataList="loadList" :taskId="taskId" :processId="processId" :busNo="busNo" :designerId="designerId" :designerCode="designerCode"/>
		<UndefProcessDetail ref="undefProcessDetailRef" @refreshDataList="loadList" :taskId="taskId" :processId="processId" :busNo="busNo" :designerId="designerId" :designerCode="designerCode"/>
		<component :is="componentId" ref="customProcessDetailRef" :taskId="taskId" :processId="processId" :busNo="busNo" @refreshDataList="loadList" :designerId="designerId" :designerCode="designerCode"></component>
		<VFormProcessApprove ref="vFormProcessApproveRef" @refreshDataList="loadList" />
		<UndefProcessApprove ref="undefProcessApproveRef" @refreshDataList="loadList" />
		<component :is="componentIdApp" ref="customProcessApproveRef" :taskId="taskId" :processId="processId" :busNo="busNo" @refreshDataList="loadList" :designerId="designerId" :designerCode="designerCode" ></component>
	</div>
</template>
<script lang="ts" name="todoTaskHome">
import { nextTick, ref, reactive, toRefs, onMounted, defineComponent } from 'vue'
import { workflowApi } from '/@/api/workflowapi'
import VFormProcessDetail from "../workflow/vFormProcessDetail.vue"
import UndefProcessDetail from "../workflow/undefProcessDetail.vue"
import VFormProcessApprove from "../workflow/vFormProcessApprove.vue"
import UndefProcessApprove from "../workflow/undefProcessApprove.vue"
export default defineComponent({
	components: { VFormProcessDetail, UndefProcessDetail, VFormProcessApprove, UndefProcessApprove },
	setup() {
		const vFormProcessDetailRef = ref()
		const undefProcessDetailRef = ref()
		const customProcessDetailRef = ref()
		const vFormProcessApproveRef = ref()
		const undefProcessApproveRef = ref()
		const customProcessApproveRef = ref()
		const state = reactive({
			listLoading: false,
			dataList: [],
			total: 0,
			totalSelect: 0,
			param: {
				page: 1,
				limit: 10,
			},
			src2: '',
			dialogVisible: false,
			componentId: null,
			componentIdApp: null,
            processId: '',
            taskId: '',
			busNo: '',
			designerId: '',
			designerCode: '',
			formData: {},
			//流程自定义的vform表单
			vFormCode: ''
		})
		// 页面加载时
		onMounted(() => {
			// 列表查询
			loadList()
		})
		//查询
		const loadList = () => {
			state.listLoading = true
			workflowApi().queryTodoTaskList(state.param).then(data => {
				if (data != null) {
					state.dataList = data.list
					state.total = data.totalCount
				} else {
					state.dataList = []
					state.total = 0
				}
			}).catch(() => {
			}).finally(() => {
				state.listLoading = false
			})
		}
		const submitTimefn = (row: any) => {
			if (row.submitTime) {
				return row.submitTime.substr(0, 10)
			} else {
				return ''
			}
		}
		// 分页改变
		const onHandleSizeChange = (val: number) => {
			state.param.limit = val;
			loadList()
		}
		// 分页改变
		const onHandleCurrentChange = (val: number) => {
			state.param.page = val;
			loadList()
		}
		const processTask = (row: any) => {
			let path = row.formKey
			state.taskId = row.id
			state.processId = row.processId
			state.busNo = row.busNo
			state.designerId = row.wf_param.businessDesignerId ? row.wf_param.businessDesignerId : ''
			state.designerCode = row.wf_param.businessDesignerCode ? row.wf_param.businessDesignerCode : ''
			nextTick(() => {
				if (state.designerId !== '') {
					let vformCode = path && path.startsWith('VFORM:') ? path.replaceAll('VFORM:', '') : '' 
					//如果流程变量中有businessDesignerId说明是通过通用业务设计的应用，直接跳转通用业务处理界面
					vFormProcessApproveRef.value.openDialog(vformCode, state.processId, state.taskId, state.busNo, state.designerId, state.designerCode)
				} else {
					//其他情况如果定义了审批页
					if (path && path.trim() !== '') {
						state.componentIdApp = () => Promise.resolve(require(`/@/views/${path}`).default);
						customProcessApproveRef.value.openDialog()
					} else {
						//其他情况如果没定义详情页，走工作流自定义表单的页面
						undefProcessApproveRef.value.openDialog(state.processId, state.taskId, state.busNo, state.designerId, state.designerCode)
					}
				}
			})	
			if(path === null){
				//没有设置的情况取'workflow/common-approve'工作流默认审批页，通过流程参数获取表单信息
			} else if(path.startsWith('VForm:')){
				//通过表单设计器设计的表单
			} else {
				//走用户自定义的审批页，若设置为'workflow/common-approve'也走这里
			}
		}
		const trace = (row: any) => {
			state.dialogVisible = true
			state.src2 = import.meta.env.VITE_API_URL + '/activiti/diagram-viewer/index.html?processDefinitionId=' + row.processDefinitionId + '&processInstanceId=' + row.processId
		}
		const detail = (row: any) => {
			state.taskId = row.id
			state.processId = row.processId
			state.busNo = row.busNo
			state.designerId = row.wf_param.businessDesignerId ? row.wf_param.businessDesignerId : ''
			state.designerCode = row.wf_param.businessDesignerCode ? row.wf_param.businessDesignerCode : ''
			let path = row.detailPage
			nextTick(() => {
				if (state.designerId !== '') {
					//如果流程变量中有businessDesignerId说明是通过通用业务设计的应用，直接跳转通用业务处理界面
					vFormProcessDetailRef.value.openDialog()
				} else {
					//其他情况如果定义了详情页
					if (path && path.trim() !== '') {
						state.componentId = () => Promise.resolve(require(`/@/views/${path}`).default);
						customProcessDetailRef.value.openDialog()
					} else {
						//其他情况如果没定义详情页，走工作流自定义表单的页面
						undefProcessDetailRef.value.openDialog()
					}
				}
			})
		}
		return {
			loadList,
			submitTimefn,
			onHandleSizeChange,
			onHandleCurrentChange,
			processTask,
			trace,
			detail,
			vFormProcessDetailRef,
			undefProcessDetailRef,
			customProcessDetailRef,
			vFormProcessApproveRef,
			undefProcessApproveRef,
			customProcessApproveRef,
			...toRefs(state),
		}
	},
})
</script>
<style>

</style>